<!--
 * @Description: 绑定设备页面
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 卢金辉 3400170271@qq.com
 * @LastEditTime: 2025-09-26 18:00:23
-->
<template>

  <div>
    <el-page-header @back="$router.go(-1)" content=" 工程页面">
    </el-page-header>

    <div class="title"
      style="height: 42px; background-color: #ececec; font-size: 15px; line-height: 40px; margin-top: 10px;">工程信息</div>
    <div class="form">
      <el-form style="margin-top: 10px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="工程编号" style="margin-left: 80px;">
              <span style="margin-left: 300px;">
                {{ engDetails.serial_number }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程名称" style="font-size: 20px;">
              <span style="margin-left: 300px;">
                {{ engDetails.name }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form style="margin-top: 10px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="工程类型" style="margin-left: 80px;">
              <span style="margin-left: 300px;">
                {{ engDetails.type }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程状态" style="font-size: 20px;">
              <span
                style="display:inline-block;margin-left: 300px;width: 53.6px;height: 24px;line-height: 22px;font-size: 12px;text-align: center;padding: 0 4px;color: #4fbc8d;background-color: #ececec;">
                {{ engDetails.status }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form style="margin-top: 10px;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" style="margin-left: 80px;">
              <span style="margin-left: 300px;">
                {{ engDetails.create_time }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" style="font-size: 20px;">
              <span style="margin-left: 300px;">
                {{ engDetails.end_time }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form style="margin-top: 10px;">
        <el-row>
          <el-form-item label="地址" style="margin-left: 80px;">
            <span style="margin-left: 300px;margin-left: 550px;">
              {{ engDetails.address }}
            </span>
          </el-form-item>
        </el-row>
      </el-form>
      <el-form style="margin-top: 10px;">
        <el-row>
          <el-form-item label="工程负责人" style="margin-left: 80px;">
            <span style="margin-left: 300px;margin-left: 550px;">
              {{ engDetails.charge_id }}
            </span>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="title" style="display: flex; margin-top: 10px;">
      <div
        style="background-color: #ececec;font-size: 15px;height: 42px;border-radius:5px ;line-height:40px; flex: 29;">
        绑定信息
      </div>
      <el-button @click="toAdd()" type="primary"
        style="width: 55.6;height: 42px;background-color: #4fbc8d; flex: 1;">绑定</el-button>
    </div>
    <!-- 表格 -->
    <el-table border :data="tableData" style="width: 100%">
      <el-table-column type="index" :index="1" label="序号" width="60" align="center">
      </el-table-column>
      <el-table-column prop="serial_number" label="设备编号" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="设备名称" width="180" align="center">
      </el-table-column>
      <el-table-column prop="latitude" label="经度" width="180" align="center">
      </el-table-column>
      <el-table-column prop="longitude" label="纬度" width="180" align="center">
      </el-table-column>
      <el-table-column prop="video" label="视频地址" align="center">
      </el-table-column>
      <el-table-column prop="status" label="在线状态" width="120" align="center">
        <template v-slot="scope">
          <div>
            <el-tag v-if="scope.row.online_status == '1'" effect="dark" type="success">在线</el-tag>
            <el-tag v-else effect="dark" type="danger">离线</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template v-slot="scope">
          <div style="display: flex; justify-content: space-around;">
            <el-link @click="unbind(scope.row)" :underline="false" type="success">解绑</el-link>
            <el-link v-if="scope.row.online_status == '0'" @click="online(scope.row)" :underline="false"
              type="success">上线</el-link>
            <el-link v-else @click="offline(scope.row)" :underline="false" type="success">下线</el-link>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 抽屉开始 -->
    <el-drawer @close="reset" size="50%" :title="title" :visible.sync="visible" direction="rtl"
      custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content" style="padding-right: 10px;">
        <el-form :rules="rules" ref="myForm" :model="formSave">
          <el-row>
            <el-col>
              <el-form-item style="background-color: #ececec; font-size: 5px;" label="1.选择设备">
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="设备">
                <el-select clearable class="select" v-model="formSave.device_id" placeholder="请选择设备">
                  <el-option  v-for="item in bind_statusData" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item style="background-color: #ececec; font-size: 5px;" label="2.配置设备">
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="longitude" label="工程经度" :label-width="formLabelWidth">
                <el-input class="input" clearable placeholder="请输入工程经度" v-model="formSave.longitude"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="latitude" label="工程纬度" :label-width="formLabelWidth">
                <el-input class="input" clearable placeholder="请输入工程纬度" v-model="formSave.latitude"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="视频流" :label-width="formLabelWidth">
              <el-input class="input1" clearable placeholder="请输入视频流" v-model="formSave.video"
                autocomplete="off"></el-input>
            </el-form-item>
          </el-row>

        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="toSubmit()">确 定</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- 抽屉结束 -->
  </div>

</template>

<script>
import { get, del, post } from '@/utils/request';
import moment from 'moment';
// 引入lodash工具库 
import _ from 'lodash';
export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
        engineer_id: this.$route.query.id,
      },
      bind_statusData: [],
      engDetails: {},
      tableData: [],
      formSave: {},
      // 抽屉标题 
      title: '绑定设备',
      // 控制抽屉显示与隐藏 
      visible: false,
      // 表单标签域宽度
      formLabelWidth: '90px',
      // 表单验证规则 
      rules: {
        latitude: [
          { required: true, message: '请输入纬度', trigger: "blur" },
        ],
        longitude: [
          { required: true, message: '请输入经度', trigger: "blur" },
        ],
      }
    };
  },
  computed: {},
  methods: {
    // 解绑
    async unbind(row) {
      let res = await get('/engineer/unbindDevice', { engineer_id: this.$route.query.id, device_id: row.id });
      // console.log(res, '解绑');
      if (res.status == 200) {
        this.$notify({
          title: '成功',
          message: res.message,
          type: 'success',
        });
        this.getTableData()
      } else {
        return false;
      }
    },
    // 上线
    async online(row) {
      let res = await get('device/openDevice', { id: row.id });
      // console.log(res, '上线');
      if (res.status == 200) {
        this.$notify({
          title: '成功',
          message: res.message,
          type: 'success',
        });
        this.getTableData()
      } else {
        return false;
      }
    },
    // 下线 
    async offline(row) {
      let res = await get('/device/closeDevice', { id: row.id });
      // console.log(res, '下线');
      if (res.status == 200) {
        this.$notify({
          title: '成功',
          message: res.message,
          type: 'success',
        });
        this.getTableData()
      } else {
        return false;
      }
    },
    // 模态框重置表单校验
    reset() {
      this.$refs['myForm'].resetFields();
    },
    // 绑定设备
    toSubmit() {
      this.$refs['myForm'].validate(async (valid) => {
        if (valid) {
          // 表单校验通过 发起保存或更新请求
          // alert('submit!');
          let res = await get('/engineer/bindService', {
            engineer_id: this.$route.query.id,
            device_id: this.formSave.device_id,
            longitude: this.formSave.longitude,
            latitude: this.formSave.latitude,
          });
          // console.log(res, '绑定设备');
          if (res.status == 200) {
            this.$notify({
              title: '成功',
              message: res.message,
              type: 'success',
            });
            this.visible = false;
            // 重新查询数据
            this.getTableData();
          } else {
            return false;
          }
        } else {
          // 表单校验失败
          // console.log('error submit!!');
          alert('请填写必填项');
          return false;
        }
      });
    },
    async getTableData() {
      let res = await get('/device/pageQuery', this.params);
      // console.log(res);
      this.tableData = res.data.list;
    },
    // 获取未绑定的设备
    async getBindStatusData() {
      let res = await get('/device/pageQuery', { page: 1, pageSize: 1000, bind_status: 0 });
      // console.log(res, '未绑定设备');
      this.bind_statusData = res.data.list;
    },
    toAdd() {
      // 抽屉显示
      this.visible = true;
    },
  },
  created() {
    // 接受路由跳转传递的参数
    this.engDetails = this.$route.query;
  },
  mounted() {
    this.getTableData();
    this.getBindStatusData();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .input1 {
  width: 680px;
}

.input {
  width: 280px;
}

.select {
  width: 280px;
}

.demo-drawer__footer {
  border-top: 1px solid #ececec;
  padding-top: 10px;
  position: fixed;
  bottom: 15px;
  width: 50%;
  text-align: center;
}
</style>